<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
	<title>贴吧</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/message.css">
	<link rel="stylesheet" href="../../ueditor/themes/default/css/umeditor.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			background: #ddd;
		}

		a {
			margin: 0;
            cursor: pointer;
		}

		.panel .panel-body {
			border-bottom: 1px solid #ddd;
		}

		.panel .panel-body:last-child {
			border-bottom: unset;
		}

		.floor .user-info .avator {
			width: 80px;
			height: 80px;
			display: block;
			margin: 0 auto 5px;
		}

		.floor .user-info .username {
			display: block;
			margin: 0 auto;
		}

		.floor .content {
			min-height: 140px;
			border-left: 1px solid #ddd;
		}

		.floor .content img {
			max-width: 100%;
		}

		.panel-body {
			position: relative;
		}

		.panel-body:after {
			content: '';
			display: block;
			clear: both;
		}

		.panel-heading.paging {
			box-sizing: content-box;
			height: 34px;
		}

		.pagination {
			margin: 0;
			display: block;
		}

		.paging .page-info {
			color: #666;
			font-size: 12px;
			display: inline-block;
			line-height: 32px;
			margin-left: 10px;
		}

		.floor .footer {
			color: #999;
			float: right;
			font-size: 12px;
			width: 80%;
			text-align: right;
		}

		.well {
			margin: 0;
		}

        .floor .footer .reply {
			text-align: left;
			padding-top: 10px;
		}

        .floor .footer .reply .avator {
            display: inline-block;
            height: 36px;
            width: 36px;
			float: left;
        }

		.floor .footer .reply .avator img {
			height: 36px;
			width: 36px;
		}

		.floor .footer .reply .reply-container {
			min-height: 44px;
			margin-left: 44px;
		}

        .btn.border {
            background-color: #fff;
            color: #333;
            border-color: #ccc;
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 0;
            cursor: pointer;
        }

        .btn.border:hover {
            background-color: #fff;
            border-color: #3e89fa;
            color: #3e89fa;
        }

		.floor .footer .reply-username {
			float: left;
		}

		.form-group {
			position: relative;
		}

		.form-group i {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 30px;
			text-align: center;
			line-height: 34px;
			opacity: .69;
		}

		.has-error {
			color: #a94442;
		}

		.visible {
			display: block !important;
		}
	</style>
</head>
<body>
	<!-- 导航条 -->
	<nav class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="../index.html">贴吧</a>
			</div>
			<nav id="bs-navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#" data-toggle="modal" data-target=".login-modal">登录</a>
					</li>
					<li>
						<a href="#" data-toggle="modal" data-target=".regist-modal">注册</a>
					</li>
				</ul>
			</nav>
		</div>
	</nav>

	<!-- 登录框 -->
	<div class="modal fade login-modal" tabindex="-1" role="dialog" aria-labelledby="label">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="label">登录</h4>
				</div>
				<div class="modal-body" style="padding: 24px">
					<!-- 登录失败信息提示 -->
					<div class="alert alert-danger login-alert" role="alert" style="display: none"></div>
					<form style="opacity: .69">
						<div class="form-group">
							<label class="control-label" for="username" style="display: none">用户名不能为空</label>
							<i class="fa fa-user"></i>
							<input type="text" class="form-control" id="username" placeholder="用户名" style="padding-left: 30px">
						</div>
						<div class="form-group">
							<label class="control-label" for="password" style="display: none">密码不能为空</label>
							<i class="fa fa-lock"></i>
							<input type="password" class="form-control" id="password" placeholder="密码" style="padding-left: 30px">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary login-btn">登录</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 注册框 -->
	<div class="modal fade regist-modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">注册</h4>
				</div>
				<div class="modal-body" style="padding: 24px">
					<form style="opacity: .69">
						<div class="form-group">
							<label class="control-label" for="regist-username" style="display: none">用户名不能为空</label>
							<i class="fa fa-user"></i>
							<input type="text" class="form-control" id="regist-username" placeholder="用户名" style="padding-left: 30px">
						</div>
						<div class="form-group">
							<label class="control-label" for="regist-password" style="display: none">密码不能为空</label>
							<i class="fa fa-lock"></i>
							<input type="password" class="form-control" id="regist-password" placeholder="密码" style="padding-left: 30px">
						</div>
						<div class="form-group">
							<label class="control-label" for="confirm-password" style="display: none">密码不能为空</label>
							<i class="fa fa-lock"></i>
							<input type="password" class="form-control" id="confirm-password" placeholder="确认密码" style="padding-left: 30px">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary regist-btn">注册</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 主体内容 -->
	<div class="container">
		<div class="row">
			<!-- 帖子区域 -->
			<div class="col-md-8">
				<!-- 楼层 -->
				<div class="panel panel-default floor-container">
				</div>

				<!-- 回复 -->
				<script id="container" name="content" type="text/plain" style="box-sizing: content-box; width: 100%; height: 200px;"></script>
				<button type="button" class="btn btn-default submit" style="float: right; margin-top: 5px">回帖</button>
			</div>

			<!-- 右侧栏 -->
			<div class="col-md-4">

			</div>
		</div>
	</div>

	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/template-web.js"></script>
	<script src="../js/message.js"></script>
	<script src="../js/utils.js"></script>
	<!-- ueditor配置文件 -->
	<script src="../../ueditor/umeditor.config.js"></script>
	<!-- ueditor编辑器源码文件 -->
	<script src="../../ueditor/umeditor.js"></script>

	<!-- 用户信息模板 -->
	<script id="userinfo_template" type="text/html">
		<li class="dropdown">
			<a id="drop" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
				{{username}}
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu" aria-labelledby="drop">
				<li><a href="../index.html">主页</a></li>
				<li><a href="save.html">发帖</a></li>
				<li><a href="../user/settings.html">设置</a></li>
				<li role="separator" class="divider"></li>
				<li><a class="logout" href="#">退出登录</a></li>
			</ul>
		</li>
	</script>
	<!-- 帖子模板 -->
	<script id="post_template" type="text/html">
		{{if title}}
		<div class="panel-heading">{{title}}</div>
		{{/if}}
	</script>
	<!-- 帖子楼层模板 -->
	<script id="floor_template" type="text/html">
		{{each list as floor}}
		<div class="panel-body floor">
			<div class="col-md-2 col-xs-4 user-info">
				<!-- 用户头像 -->
				<img src="{{floor.avator}}" class="img-thumbnail avator">
				<a class="username text-center" href="#">{{floor.username}}</a>
			</div>
			<div class="col-md-10 col-xs-8 content">
				{{@floor.content}}
			</div>

			<!-- 回复区 -->
			<div class="footer">
				<span style="margin-right: 10px">#{{floor.index}}</span>
				<span style="margin-right: 10px">{{floor.created | before_time}}</span>
				<a data-toggle="collapse" href="#floor{{floor.id}}">
					回复{{floor.children.total != 0 ? '(' + floor.children.total + ')' : ''}}
				</a>
				<div class="collapse" id="floor{{floor.id}}" index="{{$index}}" post-id="{{floor.id}}">
					<div class="well">
						{{each floor.children.list as reply}}
                        <div class="reply">
                            <a class="avator" href="#">
                                <img src="{{reply.avator}}" class="img-rounded">
                            </a>
                            <div class="reply-container">
								<a user-id="{{reply.userId}}" reply-id="{{reply.id}}">{{reply.username}}</a>
								{{if reply.replyId}}
								回复 <a user-id="{{reply.replyUserId}}">{{reply.replyUsername}}</a>
								{{/if}}
								:
								<span>{{reply.content}}</span>
								<div style="text-align: right">
									{{reply.created | before_time}}
									<a class="reply-btn" style="margin-left: 10px">回复</a>
								</div>
                            </div>
                        </div>
						{{/each}}

                        <!-- 分页 -->
                        {{if floor.children.list.length != 0}}
                        <div style="overflow: hidden">
                            {{if floor.children.pages > 1}}
                            <nav>
                                <ul class="pagination">
                                    {{if floor.children.hasPreviousPage}}
                                    <li>
                                        <a class="prev">&laquo;</a>
                                    </li>
                                    {{/if}}

                                    <% for(var i = 1; i <= floor.children.pages; i++) { %>
                                    <li {{if i == floor.children.pageNum}}class="active"{{/if}}><a>{{i}}</a></li>
                                    <% } %>

                                    {{if floor.children.hasNextPage}}
                                    <li>
                                        <a class="next">&raquo;</a>
                                    </li>
                                    {{/if}}
                                </ul>
                            </nav>
                            {{/if}}
                            <a class="btn border say-a-word">我也说一句</a>
                        </div>
                        {{/if}}

                        <!-- 回复框 -->
                        <div style="margin-top: 10px; display: none" {{if floor.children.list.length == 0}}class="visible"{{/if}}>
							<span class="reply-username"></span>
                            <textarea class="form-control" rows="2" style="margin-bottom: 5px"></textarea>
                            <button class="btn btn-default" type="button">回复</button>
                        </div>
					</div>
				</div>
			</div>
		</div>
		{{/each}}


		<!-- 分页 -->
		<div class="panel-heading paging">
			{{if pages > 1}}
			<ul class="pagination">
				{{if hasPreviousPage}}
				<li>
					<a href="#" class="prev">&laquo;</a>
				</li>
				{{/if}}

				<% for(var i = 1; i <= pages; i++) { %>
				<li {{if i == pageNum}}class="active"{{/if}}><a href="#">{{i}}</a></li>
				<% } %>

				{{if hasNextPage}}
				<li>
					<a href="#" class="next">&raquo;</a>
				</li>
				{{/if}}
			</ul>
			{{/if}}
			<div class="page-info">
				<span style="color: #F56C6C;">{{total}}</span>条回复
				共<span style="color: #F56C6C;">{{pages}}</span>页
			</div>
		</div>
	</script>

	<!-- 回复模板 -->
	<script id="reply_template" type="text/html">
		<div class="reply">
			<a class="avator" href="#">
				<img src="{{avator}}" class="img-rounded">
			</a>
			<div class="reply-container">
				<a user-id="{{userId}}" reply-id="{{id}}">{{username}}</a>
				{{if replyId}}
				回复 <a user-id="{{replyUserId}}">{{replyUsername}}</a>
				{{/if}}
				:
				<span>{{content}}</span>
				<div style="text-align: right">
					{{created | before_time}}
					<a class="reply-btn" style="margin-left: 10px">回复</a>
				</div>
			</div>
		</div>
	</script>

	<!-- 回复模板(回复分页时用到) -->
	<script id="well_template" type="text/html">
		<div class="well">
			{{each list as reply}}
			<div class="reply">
				<a class="avator" href="#">
					<img src="{{reply.avator}}" class="img-rounded">
				</a>
				<div class="reply-container">
					<a user-id="{{reply.userId}}" reply-id="{{reply.id}}">{{reply.username}}</a>
					{{if reply.replyId}}
					回复 <a user-id="{{reply.replyUserId}}">{{reply.replyUsername}}</a>
					{{/if}}
					:
					<span>{{reply.content}}</span>
					<div style="text-align: right">
						{{reply.created | before_time}}
						<a class="reply-btn" style="margin-left: 10px">回复</a>
					</div>
				</div>
			</div>
			{{/each}}

			<!-- 分页 -->
			{{if list.length != 0}}
			<div style="overflow: hidden">
				{{if pages > 1}}
				<nav>
					<ul class="pagination">
						{{if hasPreviousPage}}
						<li>
							<a class="prev">&laquo;</a>
						</li>
						{{/if}}

						<% for(var i = 1; i <= pages; i++) { %>
						<li {{if i == pageNum}}class="active"{{/if}}><a>{{i}}</a></li>
						<% } %>

						{{if hasNextPage}}
						<li>
							<a class="next">&raquo;</a>
						</li>
						{{/if}}
					</ul>
				</nav>
				{{/if}}
				<a class="btn border say-a-word">我也说一句</a>
			</div>
			{{/if}}

			<!-- 回复框 -->
			<div style="margin-top: 10px; display: none" {{if list.length == 0}}class="visible"{{/if}}>
				<span class="reply-username"></span>
				<textarea class="form-control" rows="2" style="margin-bottom: 5px"></textarea>
				<button class="btn btn-default" type="button">回复</button>
			</div>
		</div>
	</script>


    <script>
        $(function() {
			var user; // 当前登陆用户
            var pageInfo; // 楼层数据

			// 获取当前登陆用户
			$.get('/user/current', function (resp) {
				user = resp;
				var html = template('userinfo_template', resp);
				$('.navbar .navbar-collapse .navbar-right').html(html);
			})

			// 初始化 ueditor
			var um = UM.getEditor('container', {
				imageUrl: '/imageUp', // 图片上传接口
				imagePath: '',
				autoHeightEnabled: false, // 是否自动长高,默认true
				toolbar:[
					'bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
					'insertorderedlist insertunorderedlist',
					'justifyleft justifycenter justifyright justifyjustify',
					'link unlink | emotion image'
				],
				focus: true
			});

			// 获取参数列表
			function getParams() {
				var url = document.location.toString();
                url = url.replace('#', '');
				if (url.indexOf('?') == -1) return;
				return url.substring(url.indexOf('?') + 1).split('&').map(param => {
					var arr = param.split('=');
					return {name: arr[0], value: arr[1]};
				});
			}

			// 根据参数名称获取参数
			function getParam(name) {
				var params = getParams();
				return params.filter(param => param.name == name)[0];
			}

			var id = getParam('id').value;
			var query = {
				parentId: id,
				pageNum: 1,
				pageSize: 10
			};

			// 帖子标题
			var title;
			// 获取帖子信息
			$.get('/post/' + id, function (resp) {
				title = template('post_template', resp);
				$('.floor-container').prepend(title);

				// 修改title
				$('title').html(resp.title);
			})

			// 获取楼层信息
			$.post('/post/list/floor', query, function (resp) {
				if (resp.list.length != 0) {
					// 数据保存
                    pageInfo = resp;
                    // 渲染页面
					var html = template('floor_template', resp);
					$('.floor-container').append(html);
				}
			})

			// 时间戳转时间
			template.defaults.imports.before_time = function (timestamp) {
				return before_time(timestamp);
			};

			// 回帖
			var post = {};
			$('.submit').on('click', function () {
				// 回帖前校验用户是否登陆
				if (typeof user == 'undefined') {
					$.message({message: '登录之后才能回帖哦', type: 'warning'});
					return;
				}

				var content = um.getContent(); // 获取html内容

				post.parentId = id;
				post.content = content;
				post.type = 2;

				if (content == '') { // 校验
					$.message({message: '回帖不能为空', type: 'warning'});
					return;
				}

				$.post('/post', post, function (resp) { // 回帖成功
					post = {}; // 清空post变量
					window.location.reload()
				}).fail(function (resp) { // 回帖失败
					$.message({
						message:'回复失败',
						type:'error'
					});
				})
			});

			// 分页
			$(document).on('click', '.paging .pagination', function (e) {
				if ($(e.target).hasClass('prev')) {
					query.pageNum--;
				} else if ($(e.target).hasClass('next')) {
					query.pageNum++
				} else {
					// 选择页数
					var pageNum = $(e.target).text();
					if (query.pageNum ==  pageNum) return;
					query.pageNum = pageNum;
				}

				$.post('/post/list/floor', query, function (resp) {
					if (resp.list.length != 0) {
						// 数据保存
						pageInfo = resp;
						// 渲染页面
						var html = template('floor_template', resp);
						$('.floor-container').html(html);
						$('.floor-container').prepend(title);
					}
				})
			})

			// 回复
			$(document).on('click', '.collapse button', function (e) {
				// 回复前校验用户是否登陆
				if (typeof user == 'undefined') {
					$.message({message: '登录之后才能回复哦', type: 'warning'});
					return;
				}

				var id = $(e.target).closest('.collapse').attr('post-id');
				var content = $(e.target).prev().val();

				post.parentId = id;
				post.content = content;
				post.type = 3;

				if (content == '') { // 校验
					$.message({message: '回复不能为空', type: 'warning'});
					return;
				}

				$.post('/post', post, function (resp) { // 回复成功
					post = {}; // 清空post变量
					$(e.target).prev().val(''); // 清空输入框
					var html = template('reply_template', resp); // 模板渲染
					$('#floor' + id + ' .well').prepend(html);
				}).fail(function (resp) { // 回复失败
					$.message({
						message:'回复失败',
						type:'error'
					});
				})
			})

            // 我也说一句
            $(document).on('click', '.say-a-word', function () {
				if (post.replyId || post.replyUserId || post.replyUsername) {
					post = {};
					$(this).parent().next().addClass('visible');
					$(this).parent().next().find('.reply-username').text('');
					return;
				}
                $(this).parent().next().toggleClass('visible');
            })

            // 回复区域分页
            $(document).on('click', '.footer .collapse', function (e) {
				var $collapse = $(this);
            	// 回复区所在的楼层在pageInfo中的索引
                var index = parseInt($(this).attr('index'));
                // 校验
                if (typeof pageInfo.list[index].children == 'undefined' || pageInfo.list[index].children == null) return;
                if ($(e.target).closest('.pagination').length == 0) return;

				// 请求的json
				var parentId = $(this).attr('post-id');
				var pageNum = pageInfo.list[index].children.pageNum;
                var pageSize = pageInfo.list[index].children.pageSize;
                var query = {
					parentId: parentId,
                	pageNum: pageNum,
					pageSize: pageSize
				};

				if ($(e.target).hasClass('prev')) {
				    query.pageNum--;
				} else if ($(e.target).hasClass('next')) {
				    query.pageNum++
				} else {
				    // 选择页数
				    var pageNum = $(e.target).text();
				    if (query.pageNum ==  pageNum) return;
				    query.pageNum = pageNum;
				}

				$.post('/post/list/reply', query, function (resp) {
					if (resp.list.length != 0) {
						// 数据保存
						pageInfo.list[index].children = resp;
						// 渲染页面
						var html = template('well_template', resp);
						$collapse.html(html);
					}
				})
            })

			// 回复某个用户
			$(document).on('click', '.reply-btn', function () {
				var a = $($(this).closest('.reply-container').find('a[user-id]')[0]);
				var reply_id = a.attr('reply-id'); // id
				var user_id = a.attr('user-id'); // 回复用户的ID
				var username = a.text(); // 回复用户的名称

				post.replyId = reply_id;
				post.replyUserId = user_id;
				post.replyUsername = username;

				$(this).closest('.well').find('.reply-username').text('回复 ' + username + '：');
				$(this).closest('.well').find('.reply-username').parent().addClass('visible');
			})


			// 登录
			$('.login-btn').on('click', function () {
				var username = $('#username').val();
				var password = $('#password').val();

				// 登录之前先清空所有表单校验的提示
				$('#username').siblings('.control-label').removeClass('visible');
				$('#password').siblings('.control-label').removeClass('visible');
				$('#username').parent('.form-group').removeClass('has-error');
				$('#password').parent('.form-group').removeClass('has-error');
				$('.login-alert').removeClass('visible')

				// 校验表单
				if (username == '') {
					$('#username').siblings('.control-label').addClass('visible').html('用户名不能为空');
					$('#username').parent('.form-group').addClass('has-error');
				}
				if (password == '') {
					$('#password').siblings('.control-label').addClass('visible').html('密码不能为空')
					$('#password').parent('.form-group').addClass('has-error');
				}
				if (username == '' || password == '') { // 表单校验失败就终止接下来的操作
					return;
				}

				// 登录请求
				$.post('/user/login', {username: username, password: password}, function (resp) { // 登录成功
					$.message('登录成功');
					user = resp;
					$('.login-modal').modal('toggle');
					var html = template('userinfo_template', resp);
					$('.navbar .navbar-collapse .navbar-right').html(html);
				}).fail(function (resp) { // 登录失败
					$('#username').parent('.form-group').addClass('has-error');
					$('#password').parent('.form-group').addClass('has-error');
					$('.login-alert').addClass('visible').text(resp.responseJSON.message);
				});
			})

			// 登录框关闭事件
			$('.login-modal').on('hidden.bs.modal', function (e) {
				$('#username').val('');
				$('#password').val('');
				$('#username').siblings('.control-label').removeClass('visible');
				$('#password').siblings('.control-label').removeClass('visible');
				$('#username').parent('.form-group').removeClass('has-error');
				$('#password').parent('.form-group').removeClass('has-error');
				$('.login-alert').removeClass('visible')
			})

			// 当用户名输入值不为空的时候,撤销'用户名不为空'的警告
			$('#username').on('input propertychange', function () {
				if ($(this).val != '') {
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
				}
			})

			// 当密码输入值不为空的时候,撤销'密码不为空'的警告
			$('#password').on('input propertychange', function () {
				if ($(this).val != '') {
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
				}
			})

			// 检查用户名是否注册过了
			$('#regist-username').on('blur', function () {
				var _this = $(this);
				var username = _this.val();

				if (username != '') {
					$.get('/user/check/username', {username: username}, function (resp) {
						if (resp) {
							_this.siblings('.control-label').addClass('visible').html('用户名已注册');
							_this.parent('.form-group').addClass('has-error');
						} else {
							_this.siblings('.control-label').removeClass('visible');
							_this.parent('.form-group').removeClass('has-error');
						}
					})
				}
			})

			// 校验两次输入的密码是否一致(密码)
			$('#regist-password').on('input propertychange', function () {
				var password = $(this).val();
				var confirm_password = $('#confirm-password').val();

				if (password != confirm_password) {
					$(this).siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$(this).parent('.form-group').addClass('has-error');
					$('#confirm-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#confirm-password').parent('.form-group').addClass('has-error');
				} else {
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
					$('#confirm-password').siblings('.control-label').removeClass('visible');
					$('#confirm-password').parent('.form-group').removeClass('has-error');
				}
			})

			// 校验两次输入的密码是否一致(确认密码)
			$('#confirm-password').on('input propertychange', function () {
				var password = $('#regist-password').val();
				var confirm_password = $(this).val();

				if (password != confirm_password) {
					$('#regist-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#regist-password').parent('.form-group').addClass('has-error');
					$(this).siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$(this).parent('.form-group').addClass('has-error');
				} else {
					$('#regist-password').siblings('.control-label').removeClass('visible');
					$('#regist-password').parent('.form-group').removeClass('has-error');
					$(this).siblings('.control-label').removeClass('visible');
					$(this).parent('.form-group').removeClass('has-error');
				}
			})

			// 注册
			$('.regist-btn').on('click', function () {
				// 注册之前先清空所有表单校验的提示
				$('#regist-username').siblings('.control-label').removeClass('visible');
				$('#regist-password').siblings('.control-label').removeClass('visible');
				$('#confirm-password').siblings('.control-label').removeClass('visible');
				$('#regist-username').parent('.form-group').removeClass('has-error');
				$('#regist-password').parent('.form-group').removeClass('has-error');
				$('#confirm-password').parent('.form-group').removeClass('has-error');

				var vaild = true;
				var username = $('#regist-username').val();
				var password = $('#regist-password').val();
				var confirm_password = $('#confirm-password').val();

				// 表单校验
				if (username == '') {
					$('#regist-username').siblings('.control-label').addClass('visible').html('用户名不能为空');
					$('#regist-username').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				if (password == '') {
					$('#regist-password').siblings('.control-label').addClass('visible').html('密码不能为空');
					$('#regist-password').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				if (confirm_password == '') {
					$('#confirm-password').siblings('.control-label').addClass('visible').html('密码不能为空');
					$('#confirm-password').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				if (password != confirm_password) {
					$('#regist-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#regist-password').parent('.form-group').addClass('has-error');
					$('#confirm-password').siblings('.control-label').addClass('visible').html('两次输入的密码不一致');
					$('#confirm-password').parent('.form-group').addClass('has-error');
					vaild = false;
				}
				$.get('/user/check/username', {username: username}, function (resp) {
					if (resp) {
						$('#regist-username').siblings('.control-label').addClass('visible').html('用户名已注册');
						$('#regist-username').parent('.form-group').addClass('has-error');
					} else {
						if (!vaild) return;
						$.post('/user/regist', {username: username, password: password}, function (resp) {
							$.message('注册成功');
							$('.regist-modal').modal('toggle');
						})
					}
				})

			})

			// 注册框关闭事件
			$('.regist-modal').on('hidden.bs.modal', function (e) {
				$('#regist-username').val('');
				$('#regist-password').val('');
				$('#confirm-password').val('');
				$('#regist-username').siblings('.control-label').removeClass('visible');
				$('#regist-password').siblings('.control-label').removeClass('visible');
				$('#confirm-password').siblings('.control-label').removeClass('visible');
				$('#regist-username').parent('.form-group').removeClass('has-error');
				$('#regist-password').parent('.form-group').removeClass('has-error');
				$('#confirm-password').parent('.form-group').removeClass('has-error');
			})

			// 退出登录
			$(document).on('click', '.logout', function () {
				$.get('/user/logout', function (resp) {
					window.location.reload()
				})
			})
        })
    </script>
</body>
</html>
